<!-- ajax layout which only needs content area -->
<div class="row">
  <div class="col-xs-12 form-btn-wrapper">
    <!-- PAGE CONTENT BEGINS -->
    <div class="form-horizontal" role="form">


      <!-- 状态 -->
      <div class="form-group">
        <label class="col-sm-3 control-label no-padding-right" for="status" data-i18n="Status"></label>
        <div class="col-sm-9">
          <label>
            <input id="status" name="status" class="ace ace-switch ace-switch-6" type="checkbox" />
            <span class="lbl"></span>
          </label>
        </div>
      </div>

      <div id="statusSets">

        <!-- 服务商 -->
        <div class="form-group">
          <label class="col-sm-3 control-label no-padding-right" for="isp" data-i18n="Service Provider"></label>
          <div class="col-sm-9">
            <select class="col-xs-10 col-sm-5" id="isp">
            </select>
          </div>
        </div>

        <!-- 域名 -->
        <div class="form-group">
          <label class="col-sm-3 control-label no-padding-right" for="domain" data-i18n="Domain"></label>
          <div class="col-sm-9">
            <div class="clearfix">
              <input type="text" id="domain" class="col-xs-10 col-sm-5" maxlength="128" />
            </div>
          </div>
        </div>

        <!-- 账号 -->
        <div class="form-group">
          <label class="col-sm-3 control-label no-padding-right" for="account" data-i18n="Account"></label>
          <div class="col-sm-9">
            <div class="clearfix">
              <input type="text" id="account" class="col-xs-10 col-sm-5" maxlength="128" />
            </div>
          </div>
        </div>

        <!-- 密码 -->
        <div class="form-group">
          <label class="col-sm-3 control-label no-padding-right" for="password" data-i18n="Password"></label>
          <div class="col-sm-9">
            <span class="input-icon input-icon-right input-icon-form col-xs-10 col-sm-5">
              <input type="password" id="password" maxlength="128" autocomplete="new-password" />
              <i class="ace-icon fa fa-eye-slash" id="password-icon"></i>
            </span>
          </div>
        </div>

      </div><!--statusSets-->


      <div class="clearfix form-actions">
        <div class="col-md-offset-3 col-md-9">
          <button class="btn btn-second" type="button" id="refresh"><span data-i18n="Refresh"></span></button>
          &nbsp; &nbsp; &nbsp;
          <button class="btn btn-main" type="button" id="apply"><span data-i18n="Apply"></span></button>
        </div>
      </div>



    </div>
    <!-- PAGE CONTENT ENDS -->

  </div><!-- /.col -->
</div><!-- /.row -->


<!-- page specific plugin scripts -->
<script type="text/javascript">
    (function () {
        var ipupdate;
        var langjson = base64.decode( page.param( 'lang', location.hash ) );
        
        function load_ipupdate()
        {
            he.load( [ 'ddns@ipupdate' ] ).then( function(v){
                ipupdate = v[0];
                $('#status').prop('checked', able2boole(ipupdate.status));
  
                $('#status').unbind('change').change(function () {
                    if ($(this).prop('checked'))
                    {
                        $('#statusSets').show();
                    }
                    else
                    {
                        $('#statusSets').hide();
                    }
                }).trigger('change');
                
            });
        }
        function save_ipupdate()
        {
            if ( ipupdate == null )
            {
                return;
            }
            var ipupdatecopy = JSON.parse(JSON.stringify(ipupdate));
    
            ipupdate.status = boole2able( $('#status').prop('checked') );
            if ( ipupdate.status == "enable" )
            {
            }
            if ( ocompare( ipupdate, ipupdatecopy ) )
            {
                page.alert( { message: $.i18n('Settings unchanged') } );
                return;
            }
            he.save( [ "ddns@ipupdate="+JSON.stringify(ipupdate) ] ).then( function(){
                page.hint2succeed( $.i18n('Modify successfully') );
                load_ipupdate();
            });
        }
    
        $.i18n().load( page.lang(langjson) ).then( function () {
          /* init the langauage */
          $.i18n().locale = lang; $('body').i18n();

          var str = '';
          var isps =
          [
            {label: 'ezip',value: 'ezip'},
            {label: 'pgpow',value: 'pgpow'},
            {label: 'dhs',value: 'dhs'},
            {label: 'dyndns',value: 'dyndns'},
            {label: 'dyndns-static',value: 'dyndns-static'},
            {label: 'dyndns-custom',value: 'dyndns-custom'},
            {label: 'qdns(3322.org)',value: 'qdns'},
            {label: 'qdns(3322.org) static',value: 'qdns-static'},
            {label: 'ods',value: 'ods'},
            {label: 'tzo',value: 'tzo'},
            {label: 'easydns',value: 'easydns'},
            {label: 'easydns-partner',value: 'easydns-partner'},
            {label: 'gnudip',value: 'gnudip'},
            {label: 'justlinux',value: 'justlinux'},
            {label: 'dyns',value: 'dyns'},
            {label: 'hn',value: 'hn'},
            {label: 'zoneedit',value: 'zoneedit'},
            {label: 'heipv6tb',value: 'heipv6tb'},
            {label: 'noip',value: 'noip'}
          ];
          for ( var i in isps )
          {
            var isp = isps[i];
            str += '<option value="' + isp.value + '">' + isp.label + '</option>';
          }
          $('#isp').html(str);
          page.password('oldPassword', 'oldPassword-icon');

          /* load the configure */
          load_ipupdate();
          /* bind the refresh */
          $('#refresh').on(ace.click_event, function () {
            location.reload();
          });
          /* bind the apply to save configure */
          $('#apply').on(ace.click_event, function () {
            save_ipupdate();
          });
        });
    
    
    })()


</script>
